<template>
  <div class="_tobMenu">
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="open">
        <el-tab-pane
          v-for="item in tobMenu"
          :key="item.path"
          :label="item.name"
          :name="item.path"
        >
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editableTabsValue:this.$store.state.tobMenu[0].path,
    }
  },
  watch: {
    $route: function(to, from) {
      this.addTab(to);
    }
  },
  computed: {
    tobMenu: function() {
      return this.$store.state.tobMenu;
    }
  },
  methods: {
    open: function(tob) {
      this.$router.push(tob.name);
    },
    addTab(to) {
      var that = this;
      let tabs = that.$store.state.tobMenu;
      let isHave = false;
      tabs.forEach((tab, index) => {
        if (tab.path === to.path) {
          isHave = true;
        }
      });
      if(!isHave){
        that.$store.state.tobMenu.push(to)
      }
      that.editableTabsValue = to.path;
    },
    removeTab(targetName) {
      let tabs = this.$store.state.tobMenu;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.path === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.path;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.$router.push(activeName);
      this.$store.state.tobMenu = tabs.filter(tab => tab.path !== targetName);
    }
  }
};
</script>
<style >
._tobMenu .el-tabs__header{
  margin:0px;
}
._tobMenu .el-tabs__item{
  height: 30px;
  line-height: 30px;
  font-size: 10px;
}
._tobMenu .el-tabs--card>.el-tabs__header .el-tabs__nav{
  margin: 0px;
  border-radius: 0px;
  border: none;
}
._tobMenu .el-tabs__nav-next,._tobMenu .el-tabs__nav-prev{
  padding: 9px 0;
  /* background-color: #4e5256; */
  /* border-radius: 0 4px 0px 4px; */
}

._tobMenu .el-tabs--card>.el-tabs__header .el-tabs__item{
  border-bottom: none;
  border-left: none;
  border-right: 0.01rem solid #E4E7ED;
  margin: 0px 0px 0px 0px;
  border-radius: 0px 5px 0px 0px;
}
._tobMenu .el-tabs__item.is-active{
  border-bottom: 1px solid #409EFF !important;
}
._tobMenu .el-tabs__nav .el-tabs__item:nth-child(1) span{
  display: none;
}
._tobMenu .el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{
    padding-left:  0.4rem;
    padding-right:  0.4rem;
}
</style>